import React, { useState, useEffect } from "react";
import phone from "./iphone7.png";
import "./style.css";
const baseUrl = "https://mr.ke.com/3dmvp/#/509165";
export default function Index() {
  const [url, setUrl] = useState("");
  useEffect(() => {
    setTimeout(() => {
      setUrl(baseUrl);
    }, 1000);
  }, []);
  return (
    <div className="page column">
      <div className="sub-title">在3D沙盘中的应用</div>
      <div className="anime-5 cover" id="anime5">
        <div className="card">视觉效果</div>
        <div className="card">突出元素</div>
      </div>
      <div className="phone">
        <iframe
          width="375"
          height="667"
          src={url}
          title="3D沙盘"
          className="phone-inner"
          id="3dmvp"
          onLoad={(e) => {
            setTimeout(() => {
              let target = e.target.parentElement;
              if (target) target.style.animationPlayState = "running";
              [...(document.getElementById("anime5")?.children ?? [])].forEach(
                (item) => {
                  item.style.animationPlayState = "running,running";
                }
              );
            }, 1000);
          }}
        ></iframe>
        <img
          src={phone}
          alt="phone"
          className="phone-body"
          draggable={false}
          onClick={() => {
            setUrl(baseUrl);
          }}
        ></img>
      </div>
    </div>
  );
}
